import React, { useState, useEffect,useRef } from 'react';
import { Button, Checkbox, Form, Input, Select, Upload } from 'antd';
import { history } from 'umi';
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-react';
import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor';
import { useAddKey } from '@/hooks/useKey';
import { timestampToTime } from '@/utils';
import { PlusOutlined } from '@ant-design/icons';


const { TextArea } = Input;
function trends() {

  const [state, setState]: any = useState(history.location.state);
  //   console.log(state);

  const onFinish = (values: any) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  // editor 实例
  const [editor, setEditor] = useState<IDomEditor | null>(null); // TS 语法
  // const [editor, setEditor] = useState(null)                   // JS 语法

  // 编辑器内容
  const [html, setHtml] = useState('<p>hello</p>');

  // 模拟 ajax 请求，异步设置 html
  useEffect(() => {
    setTimeout(() => {
      setHtml('<p>hello world</p>');
    }, 1500);
  }, []);

  // 工具栏配置
  const toolbarConfig: Partial<IToolbarConfig> = {}; // TS 语法
  // const toolbarConfig = { }                        // JS 语法

  // 编辑器配置
  const editorConfig: Partial<IEditorConfig> = {
    // TS 语法
    // const editorConfig = {                         // JS 语法
    placeholder: '请输入内容...',
  };

  // 及时销毁 editor ，重要！
  useEffect(() => {
    return () => {
      if (editor == null) return;
      editor.destroy();
      setEditor(null);
    };
  }, [editor]);

  return (
    <div>
      <Form
        name="basic"
        labelCol={{ span: 2 }}
        wrapperCol={{ span: 16 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item label="所属楼盘" name="username">
          <Input defaultValue={state.title} bordered={false} disabled />
        </Form.Item>

        <Form.Item label="所属分类">
          <Select
            defaultValue="default"
            style={{ width: 120 }}
            options={[
              {
                value: 'default',
                label: '--请选择--',
              },
              {
                value: 'jack',
                label: '实景图',
              },
              {
                value: 'lucy',
                label: '效果图',
              },
              {
                value: 'disabled',
                label: '配套图',
              },
              {
                value: 'Yiminghe',
                label: '样板间',
              },
            ]}
          />
        </Form.Item>

        <Form.Item label="标题" name="username">
          <Input placeholder="标题" style={{ width: 300 }} />
        </Form.Item>

        <Form.Item label="缩略图">
          <Upload action="/upload.do" listType="picture-card">
            <div>
              <PlusOutlined />
              <div style={{ marginTop: 8 }}>上传图片</div>
            </div>
          </Upload>
        </Form.Item>

        <Form.Item label="简介">
          <TextArea placeholder="简介" style={{ width: 600, height: 100 }} />
        </Form.Item>

        <Form.Item label="楼盘介绍" wrapperCol={{ span: 16 }}>
          <div style={{ border: '1px solid #ccc', zIndex: 100 }}>
            <Toolbar
              editor={editor}
              defaultConfig={toolbarConfig}
              mode="default"
              style={{ borderBottom: '1px solid #ccc' }}
            />
            <Editor
              defaultConfig={editorConfig}
              value={html}
              onCreated={setEditor}
              onChange={(editor) => setHtml(editor.getHtml())}
              mode="default"
              style={{ height: '500px', overflowY: 'hidden' }}
            />
          </div>
          {/* <div style={{ marginTop: '15px' }}>{html}</div> */}
        </Form.Item>

        <Form.Item label="添加时间">
          <Input
            style={{ width: 300 }}
            defaultValue={timestampToTime(state.create_time)}
          />
        </Form.Item>
        <Form.Item label="浏览数">
          <Input style={{ width: 300 }} defaultValue={'1'} />
        </Form.Item>
        <Form.Item label="seo标题">
          <Input placeholder="seo标题" style={{ width: 300 }} />
        </Form.Item>
        <Form.Item label="seo关键词">
          <Input placeholder="seo关键词" style={{ width: 300 }} />
        </Form.Item>
        <Form.Item label="seo描述">
          <TextArea placeholder="seo描述" style={{ width: 600 }} />
        </Form.Item>
        <Form.Item wrapperCol={{ offset: 2, span: 16 }}>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}

export default trends;
